<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>AI+应用设计创新大赛</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--====== default CSS ======-->
    <link rel="stylesheet" href="/css/default.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">

    <link rel="stylesheet" href="/js/layui/css/layui.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="/css/style.css">
    <style>
        label.error{
            color: red;
            width: auto;
        }
        #content{
            width: 100%;
            padding: 10px;
        }
        .score-title{
            line-height: 36px;
            font-size: 18px;
        }
        .score-detail{
            padding-left:16px;
            margin-bottom: 30px;

            .detail-title{
                line-height: 36px;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .detail-detail{
                margin-top: 24px;
                margin-left: 5px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <input type="hidden" id="userId" th:value="${userId}">
            <input type="hidden" id="groundId" th:value="${groundId}">
            <div id="content">
            </div>
            <div>
                <button class="layui-btn" id="score">立即评分</button>
            </div>
        </div>
    </div>

    <!--====== Jquery js ======-->
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/modernizr-3.7.1.min.js"></script>

    <!--====== Bootstrap js ======-->
    <script src="/js/bootstrap.min.js"></script>

    <script src="/js/sweetalert.min.js"></script>
    <script src="/js/jquery-validate.js"></script>

    <!--====== layerUI js ======-->
    <script src="/js/layui/layui.js"></script>

    <script src="/js/common.js"></script>
    <script type="text/javascript" th:inline="javascript">
        // 存储滑块信息的对象
        let slidersInfo = {};
        layui.use(function(){
            const slider = layui.slider;
            const $ = layui.jquery;

            $.ajax({
                url: '/option/detail/1',
                type: 'GET',
                success: function (data) {
                    // 清空表格内容
                    $('#content').empty();
                    // 根据获取到的数据重新构建表格内容
                    let contentHtml = '';
                    data.data.forEach(function (info) {
                        if (info.level === 1) {
                            contentHtml += '<div class="score-title">' + info.name + '</div>';
                        } else if (info.level === 2) {
                            contentHtml += '<div class="score-detail">' +
                                '               <div class="detail-title">' + info.name  + '<span data="'+ info.introduce+'" class="layui-badge" lay-on="test-tips-left">?</span></div>' +
                                '               <div class="detail-detail"><div id="' + info.id + '" lay-filter="' + info.id + '"></div></div>' +
                                '</div>';
                        }
                    });
                    $('#content').html(contentHtml);

                    // 动态渲染 slider
                    data.data.forEach(function (info) {
                        if (info.level === 2) {
                            slider.render({
                                elem: '#' + info.id,
                                min:0,
                                max:info.score,
                                tips: true, // 开启提示文本
                                tipsAlways: true, // 开启始终显示提示文本
                                input: true, //输入框
                                change: function(value){
                                    // 将滑块的 ID 和当前值存储起来
                                    slidersInfo[info.id] = value;
                                }
                            });
                        }
                    });
                    // element.render('badge');

                },
                error: function (error) {
                    layer.msg('获取数据失败：' + error.responseText);
                }
            });
            $(document).on('click', '[lay-on="test-tips-left"]', function () {
                // 监听具有 lay-on 属性的元素的点击事件
                $(document).on('click', '[lay-on]', function () {
                    const eventName = $(this).attr('lay-on');
                    if (eventName === 'test-tips-left') {
                        const tipsText = $(this).attr('data');
                        layer.alert(tipsText);
                    }
                });
            });

            const button = document.getElementById('score');
            button.addEventListener('click', function () {
                let result = [];
                for (let id in slidersInfo) {
                    result.push({ id: id, score: slidersInfo[id] });
                }
                const data = {
                    'userId': $('#userId').val(),
                    'judgesId': $('#judgesId').val(),
                    'list': result
                };
                $.ajax({
                    url: '/score',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function (result) {
                        layer.msg('评分成功');
                        // refreshTable();
                    },
                    error: function (error) {
                        layer.msg('保存失败：' + error.responseText);
                    }
                });

            });

        });
    </script>
</body>
</html>
